<template>
	<view class="cont u-p-l-24 u-p-r-24">
		<u-form :model="user" ref="uForm">
			<u-form-item label="" prop="name">
				<u-field
					v-model="user.name" 
					:border-bottom="false"
					style="width: 100%;"
					label="真实姓名"
					placeholder="输入真实姓名"
					required></u-field>
			</u-form-item>
			<u-form-item label="" prop="mobile">
				<u-field
					v-model="user.mobile"
					:border-bottom="false"
					style="width: 100%;"
					type="number"
					label="手机号"
					placeholder="输入手机号"
					required>
					<u-button
						size="mini" 
						slot="right" 
						type="success" 
						:custom-style="{borderRadius: '6rpx'}"
						v-if="!showCode"
						@click="onChange">更换号码</u-button>
				</u-field>
			</u-form-item>
			<u-form-item label="" prop="code" v-if="showCode">
				<u-field
					v-model="user.code"
					:border-bottom="false"
					style="width: 100%;"
					label="验证码"
					placeholder="输入验证码"
					required>
					<u-button 
						size="mini" 
						slot="right" 
						type="success" 
						:custom-style="{borderRadius: '6rpx'}"
						@click="getCode">{{codeText}}</u-button>
				</u-field>
			</u-form-item>
			<u-form-item label="" prop="brand">
				<u-field
					v-model="user.brand"
					:border-bottom="false"
					style="width: 100%;"
					label="销售品牌"
					placeholder="输入销售品牌"
					required></u-field>
			</u-form-item>
		</u-form>
		
		<!-- 验证码方格式输入方法 -->
		<!-- <u-message-input 
			mode="box"
			class="u-m-t-24"
			:maxlength="6"
			:focus="false"
			:breathe="true"
			@change="change" 
			@finish="finish"></u-message-input> -->
			
		<u-button type="success" class="u-m-t-30" @click="onSave">提交保存</u-button>
		
		<!-- 验证码通知 -->
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				
				showCode: false,
				
				user: {
					name: '',
					mobile: '',
					code: '',
					brand: ''
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						}
					],
					code: [
						{
							validator: (rule, value, callback) => {
								if (this.showCode) {
									return !!value
								} else {
									return true
								}
							},
							message: '请输入验证码'
						}
					],
					brand: [
						{
							required: true,
							message: '请输入销售品牌',
							trigger: ['blur', 'change']
						}
					]
				},
				codeText: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
		},
		methods: {
			onChange() {
				this.showCode = true
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (!this.user.mobile) {
					this.$u.toast('请输入手机号')
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					this.$refs.uTips.show({
						title: '短信验证码已发送，请查收！',
						type: 'success',
						duration: '2300'
					})
					setTimeout(() => {
						// uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start()
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送')
				}
			},
			onSave() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				})
			},
			openPage(url) {
				// if (!this.isLogin) {
				// 	// 操作
				// 	return
				// }
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.cont {
	min-height: 100vh;
	::v-deep .u-field {
		padding-top: 0;
		padding-bottom: 0;
	}
	::v-deep .u-form-item__message {
		padding-left: 20rpx !important;
	}
}
</style>
